<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title rel='shortcut icon' type='image/x-icon' href='./favicon.ico'>Welcome</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--    <link rel=”icon” href=”/static/favicon.ico” mce_href=”/static/favicon.ico” type=”image/x-icon”>-->
    <link rel=”shortcut icon” href=”./favicon.ico”  type=”image/x-icon”>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


</head>
<body class="text-center">
<div class="container text-center">
    <div class="nav flex-column justify-content-center bg-light text-center" style="height: 400px">
        <h1>Entry Task</h1>

        <form action="" id="loginForm">
            <div>Username:</div>
            <div><input type="text" value="" name="username" id="username"></div>
            <div>Password:</div>
            <div><input type="password" value="" name="password" id="password"></div>
            <div style="padding-top: 15px"><input id="loginBtn" type="submit" value="Login" onclick="return false;">
            </div>
        </form>
    </div>
</div>
</body>

<script>

    const domain = "http://localhost:8181"

    function check() {
        // alert("check init!")
        $.ajax({
            url: domain + "/user/token/query",
            method: "GET",
            dataType: "json",
            contentType: "application/json",
            success: function(result, status, xhr) {
                // alert("token query result code: " + result.code + "/data: " + result.data)
                // 存在登陆态则直接跳转index页面
                if (result.code === 0) {
                    window.location.href="index.html";
                }
            },
            error: function(xhr, status, error) {
               alert('Service not valid...')
            }
        });
    };

    check();    // login status check init

    $(document).ready(function () {
        $("#loginBtn").click(function () {
            if (checkUserInfo()) {
                LoginSuccess();
            }
        });
    });

    function checkUserInfo() {
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
        if (username === "") {
            alert("用户名不能为空");
            return false;
        }
        if (password === "") {
            alert("密码不能为空");
            return false;
        } else {
            return true;
        }
    }

    // let data = {
    //     "username": $("#username").val().replace(/(^\s*)|(\s*$)/g, ""),
    //     "password": $("#password").val().replace(/(^\s*)|(\s*$)/g, ""),
    // };
    function LoginSuccess() {
        $.ajax({
            url: domain + "/user/login",
            method: "POST",
            data: $('#loginForm').serialize(),
            dataType: "json", //预期服务器返回的数据类型
            contentType: "application/x-www-form-urlencoded",// "multipart/form-data",
            // beforeSend: function () {
            //     alert("loading......正在提交请稍候。");
            // },

            success: function (result, status, xhr) {
                // alert("result code: " + result.code + "/status: " + status)
                if (result.code === 0) {
                    window.location.href="index.html";
                } else {
                    alert(result.code + ": " + result.message)
                }
            },
            error : function() {
                alert("request异常!");
            },
        });
    }
</script>
</html>